<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="申请类型" label-width="100px">
        <el-select v-model="formInline.jrProductType" placeholder="请选择">
          <el-option
            v-for="item in types"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请状态" label-width="100px">
        <el-select v-model="formInline.applyState" placeholder="请选择">
          <el-option
            v-for="item in states"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="查询日期" label-width="100px">
        <el-date-picker v-model="formInline.startDate" type="date" value-format="yyyy-MM-dd"
                        placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker v-model="formInline.endDate" type="date" value-format="yyyy-MM-dd"
                        placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="qk">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="applyOrderNo"
        label="申请合同号"
        width="197">
      </el-table-column>
      <el-table-column
        prop="loanMessage"
        label="贷款信息">
      </el-table-column>
      <el-table-column
        prop="jrProductType"
        label="申请类型">
        <template v-slot="code">
          {{ code.row.jrProductType == 1 ? '租房分期' : (code.row.jrProductType == 2 ? '收房贷' : '应收租约保理') }}
        </template>
      </el-table-column>
      <el-table-column
        prop="loanAmount"
        label="借款金额">
        <template v-slot="code">
          {{ code.row.loanAmount + '元' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="monthLimit"
        label="借款期限">
        <template v-slot="code">
          {{ code.row.monthLimit + '个月' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="申请日期">
      </el-table-column>
      <el-table-column
        prop="companyName"
        label="资金方">
      </el-table-column>
      <el-table-column
        prop="applyState"
        label="申请状态">
        <template v-slot="code">
          {{ code.row.applyState == 1 ? '待审核' : (code.row.applyState == 2 ? '初审通过(待复审)' : (code.row.applyState == 3 ? '初审不通过' : (code.row.applyState == 4 ? '复审通过' : '复审不通过'))) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="auditMemo"
        label="驳回原因">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.applyState==3||scope.row.applyState==4||scope.row.applyState==5"
                     @click="handleClick(scope.row)" type="text" size="small">查看
          </el-button>
          <el-button v-if="scope.row.applyState==1||scope.row.applyState==2" @click="handleClick(scope.row)" type="text"
                     size="small">审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="toPage"
      :page-size="formInline.size"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import {getType, getList, getState, rentingAuditView} from "@/api/wishu/finance/finance";

export default {
  name: "index.vue",
  data() {
    return {
      tableData: [],
      formInline: {
        current: 1,
        size: 10,
      },
      total: 1,
      types: [],
      states: [],
    }
  }, methods: {
    handleClick(row) {
      rentingAuditView(row).then(res => {
        if (row.jrProductType == 1) {
          this.$router.push({path: '/system/rentment', query: {dataParam: res.data}});
          console.log(res.data);
        } else if (row.jrProductType == 2) {
          this.$router.push({path: '/system/sfloan', query: {dataParam: res.data}});
        } else {
          this.$router.push({path: '/system/factoring', query: {dataParam: res.data}});
        }
      });
    },
    qk() {
      this.formInline.jrProductType = null;
      this.formInline.applyState = null;
      this.formInline.startDate = null;
      this.formInline.endDate = null;
    },
    getStates() {
      getState().then(res => {
        this.states = res.data;
      });
    },
    getTypes() {
      getType().then(res => {
        this.types = res.data;
      });
    },
    toPage(page) {
      this.formInline.current = page;
      this.list();
    },
    list() {
      getList(this.formInline).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    }
  }, created() {
    this.list();
    this.getTypes();
    this.getStates();
  }
}
</script>

<style scoped>

</style>
